<template>
    <div class="content">
        <TableLayout form-title="">
            <el-form :model="formInline" class="formInline" label-width="90px"  slot="form">          
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="姓名">
                            <el-input v-model="formInline.leaderName" placeholder="请输入内容" :maxlength="10"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="角色">
                            <el-select v-model="formInline.typeRole" placeholder="请选择" style="width:100%" >
                                <el-option v-for="item in formInline.dataType" :key="item.pId" :label="item.sName" :value="item.pId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                            <div class="btnPosition">
                                <el-button type="primary" @click="onSubmit">查询</el-button>
                            </div>
                    </el-col>
                </el-row>
            </el-form>

            <div class="table-title" slot="table-title">
                <span class="table-title-span">查询列表</span>
                <div class="btnPosition">
                    <el-button type="primary"  @click="goToAddRole">添加员工</el-button>
                </div>
            </div>
            <el-table :data="dataApply" style="width: 100%" border @selection-change="handleSelectionChange" v-loading="loading"  ref="multipleTable">
                <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>

                <el-table-column align="center" label="登录名" prop="account"></el-table-column>
                
                <el-table-column align="center" label="姓名" prop="userName"></el-table-column>
                
                <el-table-column align="center" label="角色" prop="roleName"></el-table-column>
                
                <el-table-column align="center" label="创建时间" prop="createTime"> 
                        <template scope="scope">
                            <span>{{scope.row.createTime.substring(0,scope.row.createTime.length-2)}}</span>
                        </template>
                </el-table-column>
                
                <el-table-column align="center" label="创建人" prop="createrName"></el-table-column>

                <el-table-column label="短信状态" align="center" width="150">
                    <template scope="scope">
                        <span v-if="scope.row.status=='0'">已禁用</span>
                        <span v-if="scope.row.status=='1'">已启用</span>
                    </template>                 
                </el-table-column>
                
                <el-table-column label="最近登录时间" align="center" prop="lastLoginTime"> </el-table-column>
                
                <el-table-column align="center" label="其他操作" width="150">
                    <template scope="scope">
                        <el-button type="text" class="btn-primary" @click="goToReviseRole(scope.row)">修改</el-button>
                        <el-button type="text" class="btn-primary" @click="sigleStartCms(scope.row)" v-if="scope.row.status=='0'">启用</el-button>
                        <el-button type="text" class="btn-primary" @click="sigleCloseCms(scope.row)" v-if="scope.row.status=='1'">禁用</el-button> 
                    </template>
                </el-table-column>           
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>      
    </div>
</template>

<script>
import {findSysRoles, findCompanyStaffsByPage, updateCompanyStaffStatus} from 'api/staffManagement';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';
export default{
    components: {TableLayout},
    data() {
        return {
            formInline: {// form表单数据
                leaderName: '', // 姓名
                fProvinceId: '', // 省
                fAreaId: '', // 区
                fCityId: '', // 市
                province: [], // 省列表
                findCity: [], // 市列表
                findArea: [], // 区列表
                loginNum: '', // 登录名
                typeRole: '', // 角色
                dataType: []// 角色列表
            },
            checked: true,
            dataApply: [],
            dataNum: 1, // 表格1显示条数，初始为1
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            loading: true,
            multipleSelection: []
        }
    },
    // 计算属性
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid'
        ])
    },
    // 初始化
    created() {
        this.searchFetchData();
        this.getroleType();
    },
    
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 查询角色类型
        getroleType() {
            findSysRoles().then(response => {
                let typeRole = response.data.content;
                let select = {
                    sName: '请选择',
                    pId: ''
                }
                typeRole.unshift(select);
                this.formInline.dataType = typeRole;
            });
        },
        // 单个开启
        sigleStartCms(row) {
            let roleIds = row.id;
            let status =row.status;
            this.$confirm('确定要开启短信?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                updateCompanyStaffStatus(status, roleIds).then(response => {
                    this.searchFetchData();
                    this.$message({
                        type: 'success',
                        message: '开启短信成功!'
                    })
                });  
            }).catch(e => {       
                //console.log(e);
            });
        },
        // 单个禁用
        sigleCloseCms(row) {
            let roleIds = row.id;
            let status =row.status;
            this.$confirm('确定要关闭短信?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                updateCompanyStaffStatus(status, roleIds).then(response => {
                    this.searchFetchData();
                    this.$message({
                        type: 'success',
                        message: '关闭短信成功!'
                    })
                });  
            }).catch(e => {       
                //console.log(e);
            });
        },
        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        },
        // 查询列表
        searchFetchData() {
            findCompanyStaffsByPage(this.listQuery.page, this.config.pageSize, this.formInline.leaderName, this.formInline.typeRole).then(response => {              
                if (response.data.status==200) {
                    this.dataApply = response.data.content.list;
                    this.listQuery.total = response.data.content.pagination.total;
                    this.loading = false;   
                } else {
                    this.$message({
                        type: 'warning',
                        message: response.data.errorMsg
                    })
                }
            });
        },
        // 表单查询
        onSubmit() {
            this.loading = true;
            this.searchFetchData();
        },
        // 跳转

        // 添加公司员工
        goToAddRole() {
            this.$router.push('addStaff');
        },

        // 修改员工信息
        goToReviseRole(row) {
            //console.log(row);
            this.$router.push({
                name: '修改员工信息',
                params: {
                    // 获取姓名角色的数据
                    orgUserId: row.id,
                    roleId: row.roleId,
                    userName: row.userName
                }
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    label{
        text-align:left;
    }
    .formInline {
        
            .btnPosition{
                text-align:center;
                .el-button{
                    padding:12px 50px;
                }
            }
    }
    .footer{
            text-align:center;
            margin-top:40px;
        }
    .footer .el-button{
            padding:10px 40px;
        }
}
</style>